<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>charts</title>
    <link rel="stylesheet" href="../static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container layuimini-main">
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2" style="text-align: center">
                <h1>用户相关</h1>
        </div>
    </div>
        <div class="layui-row">
            <div class="layui-col-md6">
                <!--用户性别比例-->
                <div id="genderPercent" style="width: 600px;height:400px;"></div>
            </div>
            <div class="layui-col-md6">
                <!--用户收藏前十-->
                <div id="TopLove" style="width: 600px;height:400px;"></div>
            </div>
        </div>
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2" style="text-align: center">
            <h1>电影相关</h1>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <!--票房前十-->
            <div id="sellChart" style="height:400px;"></div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <!--高分前十-->
            <div id="TopStar" style="height:800px;"></div>
        </div>
    </div>

</div>
<script src="../static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../static/lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script src="../static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
</body>
<script>
    layui.use(['echarts'], function () {
        var echarts = layui.echarts;
        //性别比例
        {

        // 基于准备好的dom，初始化echarts实例
        let genderPercent = echarts.init(document.getElementById('genderPercent'));
        // 指定图表的配置项和数据
        let genderPercentOption = {
            title: {
                text: '用户性别比例',
                left: 'center'
            },
            tooltip: {//提示框组件。
                trigger: 'item'//触发类型。参数：'item'，'axis'，'none'
            },
            legend: {//图例组件
                data:['男','女'],
                orient: 'vertical', //图例列表的布局朝向。
                left: 'right',//图例组件离容器左侧的距离。可选类型：string，number
            },
            color: ['#4c6ef5','#e64980'],
            series: [
                {
                    type: 'pie',
                    radius: '70%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10, //图形阴影的模糊大小
                            shadowOffsetX: 0,//阴影水平方向上的偏移距离。
                            shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色,支持的格式同color。
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        genderPercent.setOption(genderPercentOption);
        //动态载入数据库的数据
            let male,female;
            $.get("/user/genderPer",function (result) {
                male = result.male;
                female = result.female;
                genderPercent.setOption({
                    series: [{
                        name: '性别',
                        data: [{value:male,name:'男'},{value:female,name:'女'}]
                    }]
                });
            })
        }
        //用户收藏类型排行
        {
            let topLove = echarts.init(document.getElementById('TopLove'));
            let topLoveOption = {
            title: {
                text: '用户收藏类型Top10',
                left: 'center'
            },
            legend: {
                top: 'bottom'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: '80%',      //饼图的半径
                    center: ['50%', '50%'],     //定位
                    roseType: 'area',   //[area,radius],后者圆心角表示百分比，半径表示数值大小；前者圆心角相同
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [].sort(function (a, b) { return a.value - b.value; })
                }
            ]
        };
            topLove.setOption(topLoveOption);
            let res = [];
            $.get("/type/TopLove",function (result) {
                for (let i = 0; i < result.length; i++) {
                    res.push(result[i]);
                }
                // console.log(res);
                topLove.setOption({
                    series: [{
                        data: res
                    }]
                });
            })
        }
        //电影销售排行
        {
            // 基于准备好的dom，初始化echarts实例
            let sellChart = echarts.init(document.getElementById('sellChart'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '票房记录',
                    left: 'center'
                },
                legend:{
                    show: true,
                    data: []
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLabel: { interval: 0, rotate: 30 },
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '票房',
                        type: 'bar',
                        barWidth: '50%',
                        data: []
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            sellChart.setOption(option);
            //动态载入数据库的数据
            let sName =[],money = [];
            sellChart.showLoading();
            $.get("/subject/sellMap",function (result) {
                for (let i = 0; i < result.length; i++) {
                    sName.push(result[i].sName);
                    money.push(result[i].totalMoney);
                }
                // for (let i = 0; i < sName.length; i++) {
                //     console.log(sName[i])
                // }
                // for (let i = 0; i < money.length; i++) {
                //     console.log(money[i])
                // }
                sellChart.hideLoading();
                sellChart.setOption({
                    xAxis: {
                        data: sName
                    },
                    series: [
                        {
                            data: money
                        }
                    ]
                });

            })

        }
        //高分电影排行（前十）
        {

            // 基于准备好的dom，初始化echarts实例
            let TopStar = echarts.init(document.getElementById('TopStar'));
            // 指定图表的配置项和数据
            let TopStarOption = {
                title: {
                    text: '评分Top10',
                    subtext: '数据来自网络',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: { interval: 0, rotate: 30 }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: '50%',
                        data: []
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            TopStar.setOption(TopStarOption);
            //动态载入数据库的数据
            let sName =[],sRate = [];
            $.get("/subject/TopStar",function (result) {
                for (let i = 0; i < result.length; i++) {
                    sName.push(result[i].sName);
                    sRate.push(result[i].sRate);
                }
                // console.log(sName+"\n"+sRate);
                TopStar.setOption({
                    yAxis: {
                        data: sName.reverse()
                    },
                    series: [{
                        data: sRate.reverse()
                    }]
                });
            })
        }
    });
</script>
</html>